import React from 'react';
import { connect } from 'react-redux';
import { Button, Row, Col, Descriptions, message, Tooltip, Switch } from 'antd';
import NameListList from './list';
import Export from './export';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterToolNew from '../../../components/FilterTool/FilterToolNew';
import NameListAdd from './add';
import services from '../../../services/api';
import Modal from '../../../components/Modal/index';
import { Link } from 'react-router-dom';
import AuditStatus from '../../../components/AuditStatus';
import { ENABLE_STATUS } from '../../../utils/constant';
import CodeLabel from '../../../components/CodeLabel';
import AddData from './addData';

function mapStateToProps(state) {
  return {
    namelist_type: state.code.namelist_type,
    namelist_data_type: state.code.namelist_data_type,
    depts: state.global.depts,
  };
}

@connect(mapStateToProps)
class NameListIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'nameList';
    this.addComponent = NameListAdd;
    this.editComponent = NameListAdd;
    this.listsComponent = NameListList;
    this.model_width = '500px';
    this.queryParams = {};
    this.queryPanigation = {
      current_page: 1,
      page_size: 10,
    };
    this.queryTableParams = {};
    this.state = {
      types: [
        {
          value: '1',
          name: '系统内置',
        },
        {
          value: '2',
          name: '自定义',
        },
      ],
      list: [],
      totalCount: 0,
    };
  }
  componentDidMount() {
    this.statistics();
  }

  closeModal = (onlyClose) => {
    if (!onlyClose) {
      this.statistics();
      this.freshQueryList();
    }
    this.onlyCloseModal();
  };

  getNameListList = () => {
    services.nameList.list().then((res) => {
      if (res.code === 0) {
        res.data.list.forEach((item) => {
          item.calculate_field_type = item.calculate_field_type.split(',');
        });
        this.setState({
          ...res.data,
        });
      }
    });
  };

  handleAddData = () => {
    Modal.open({
      title: '添加名单数据',
      width: '600px',
      content: <AddData closeModal={() => Modal.close()} {...this.props} />,
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false,
    });
  };

  statistics() {
    services[this.api].statistics().then((res) => {
      if (res.code === 0) {
        this.setState({
          ...res.data,
        });
      } else {
        message.error(res.msg);
      }
    });
  }

  // queryTable = params => {
  //   this.queryTableParams = { ...this.queryTableParams, ...params };
  //   this.freshQueryList();
  // };

  //打开导出数据的弹窗
  openExport = () => {
    Modal.open({
      title: '切换部门',
      width: this.model_width ? this.model_width : '600px',
      content: (
        <Export applications={this.state.applications} field_ids={this.state.field_ids} closeModal={this.closeModal} />
      ),
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false,
    });
  };

  getColumns = () => {
    return [
      {
        title: '名单名称',
        key: 'list_name',
        dataIndex: 'list_name',
        render: (text, record) => (
          <Tooltip title={text} placement='topLeft'>
            <Link to={'/variable/nameList/' + record.name_list_id + '/detail'}>{record.list_name}</Link>
          </Tooltip>
        ),
      },
      {
        title: '名单类型',
        // title: (
        //   <>
        //     {this.getFilterTitle('名单类型', this.props.namelist_type, 'list_type', this.refreshTableFilter, [
        //       'key',
        //       'value',
        //     ])}
        //   </>
        // ),
        key: 'list_type',
        dataIndex: 'list_type',
        render: (text) => {
          const value = <CodeLabel code='namelist_type' value={text} />;
          return (
            <Tooltip title={value} placement='topLeft'>
              {value}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('数据类型', this.props.namelist_data_type, 'data_type', this.refreshTableFilter, [
              'key',
              'value',
            ])}
          </>
        ),
        key: 'data_type',
        dataIndex: 'data_type',
        render: (text) => {
          const value = <CodeLabel code='namelist_data_type' value={text} />;
          return (
            <Tooltip title={value} placement='topLeft'>
              {value}
            </Tooltip>
          );
        },
      },
      {
        title: '有效数据/总数',
        key: 'effect_count',
        dataIndex: 'effect_count',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '描述',
        key: 'remark',
        dataIndex: 'remark',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '可见部门',
        key: 'dept_label',
        dataIndex: 'dept_label',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '创建/修改人',
        key: 'create_user_name',
        dataIndex: 'create_user_name',
        render: (_, record) => {
          return (
            <Tooltip title={`${record.create_user_name}/${record.update_user_name}`} placement='topLeft'>{`${
              record.create_user_name
            }/${record.update_user_name}`}</Tooltip>
          );
        },
      },
      {
        title: '修改时间',
        key: 'update_time',
        width: 150,
        dataIndex: 'update_time',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      // {
      //   title: '审核情况',
      //   key: 'audit_label',
      //   dataIndex: 'audit_label',
      //   width: 70,
      //   render: (text, record) => {
      //     return <AuditStatus text={text} record={record} />;
      //   },
      // },
      {
        // title: (
        //   <>
        //     {this.getFilterTitle(
        //       '状态',
        //       [
        //         {
        //           value: -1,
        //           name: '所有状态',
        //         },
        //         {
        //           value: 1,
        //           name: '启用',
        //         },
        //         {
        //           value: 2,
        //           name: '停用',
        //         },
        //       ],
        //       'status',
        //       this.refreshTableFilter,
        //       ['value', 'name']
        //     )}
        //   </>
        // ),
        title: '状态',
        key: 'status',
        dataIndex: 'status',
        width: 70,
        render: (text, record) => {
          return <Switch checked={text === ENABLE_STATUS._TRUE} disabled />;
        },
        ellipsis: true,
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入名单名称或描述关键字',
      },
    ];
    return (
      <div>
        <FilterToolNew
          data={data}
          colNum={1}
          query={this.freshQueryList}
          refreshFilter={this.refreshFilter}
          isOnChange={true}
          justify='end'
          refresh={this.resetList}
        />
        <div className='inner-content'>
          <Row type='flex' justify='space-between' align='middle'>
            <Col span={6}>
              <Button
                type='primary'
                onClick={this.add}
                style={{
                  marginRight: '10px',
                }}
              >
                添加名单
              </Button>
              <Button type='primary' onClick={this.handleAddData}>
                添加名单数据
              </Button>
            </Col>
            <Col span={18} />
          </Row>
          <div style={{ marginTop: '10px' }}>
            {this.props.namelist_type ? (
              <ListsComponent
                {...this.state}
                {...this.props}
                edit={this.edit}
                columns={this.getColumns()}
                queryList={this.freshQueryList}
                refreshTableFilter={this.refreshTableFilter}
                onChangePagination={this.onChangePagination}
                showDetail={this.showDetail}
                queryTableParams={this.queryTableParams}
                getFilterTitle={this.getFilterTitle}
                rowKey='name_list_id'
                renderOtherParams={() => {
                  return (
                    <Descriptions className='tk-decription' column={4}>
                      <Descriptions.Item label='名单总数'>
                        <Button type='link' onClick={this.resetListAndSearch}>
                          {this.state.total_list}
                        </Button>
                      </Descriptions.Item>
                      <Descriptions.Item label='黑名单数'>
                        <Button type='link' onClick={this.refreshTableFilter.bind(this, { list_type: 1 })}>
                          {this.state.black_list}
                        </Button>
                      </Descriptions.Item>
                      <Descriptions.Item label='白名单数'>
                        <Button type='link' onClick={this.refreshTableFilter.bind(this, { list_type: 2 })}>
                          {this.state.white_list}
                        </Button>
                      </Descriptions.Item>
                      <Descriptions.Item label='其他单数'>
                        <Button type='link' onClick={this.refreshTableFilter.bind(this, { list_type: 3 })}>
                          {this.state.other_list}
                        </Button>
                      </Descriptions.Item>
                    </Descriptions>
                  );
                }}
              />
            ) : (
              ''
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default NameListIndex;
